{% extends "../../base.html" %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li class="active">
                    <a class="this">Project</a>
                </li>
                <li class="active">
                    <a class="this-page">Test result</a>
                </li>
            </ol>

        </div>
    </div>
{% endblock %}

{% block body %}
<div class="row">
	<div class="col-md-12">
    	<div class="panel">
            <div class="panel-heading">
            	<form>
            		<div style="display :inline; margin-right: 20px">
            			<a href="#" class="btn btn-primary" onClick="dload('/atp4p/result/download/?id=')">Download</a>
		        	</div>
	        	    <div style="display:inline;">
	        	    	<a href="#" class="btn btn-warning" onClick="del()">Delete</a>
	        	    </div>
	        	    <div style="display:inline; float: right;">
	        	    	<input type="button" value="Search" id="select"/>
	        	    </div>
	        	    <div style="display:inline; float: right; margin-right: 20px">
		        	    <div style="display:inline;">
		        	    	<label style="width: auto;">Transaction name</label>
		        	    </div>
		        	    <div style="display:inline;">
		        	    	<input type="text" autocomplete="off" tabindex="0" id="trans">
		        	    </div>
		        	</div>
		            <div style="display:inline; float: right; margin-right: 20px">
		        	    <div style="display:inline;">
		        	    	<label style="width: auto;">Project name</label>
		        	    </div>
		        	    <div style="display:inline;">
		        	    	<input type="text" autocomplete="off" tabindex="0" id="project">
		        	    </div>
		        	</div>
	        	</form>
            </div>
            <div class="panel-body">
            	<table class="table table-bordered" id="table">
                	<thead>
                    <tr>
                    	<th width="6%"><input type="checkbox" id="box" onclick="checkAll()" value=""></th>
                    	<th width="8%">ID</th>
                        <th>Project name</th>
                        <th>Transaction name</th>
                        <th>File name</th>
                        <th width="15%">Created Date</th>
                        <th width="14%">Operation</th>
                    </tr>
                    </thead>
                    <tbody id="content">
                    </tbody>
                </table>
                <div id="barcon" name="barcon"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    function del(id){
    	if (id === undefined){
    		id = new Array();
	    	var checkOnes = document.getElementsByName("checkOne");
	    	if(checkOnes.length>0){
    	    	for(var i=0;i<checkOnes.length;i++){
        	    	if(checkOnes[i].checked){
            			id.push(checkOnes[i].value);
            		}
        		}
			}
			id = id.toString();
		}
		var url = `/atp4p/result/delete/?id=${id}`;
	    $.ajax({
			type: 'GET',
			url: url,
			dataType:'json',
			success: function(data){
				alert("Successfully delete!");
			},
			error: function(){
				alert("Fail to delete!");
			}
		});
		select();
    };
    
    function dload(path){
    	var id = "";
	    var checkOnes = document.getElementsByName("checkOne");
	    if(checkOnes.length>0){
    	    for(var i=0;i<checkOnes.length;i++){
        	    if(checkOnes[i].checked){
            		id = checkOnes[i].value;
            		url = path + id;
				    const iframe = document.createElement('iframe');
				    iframe.style.display = 'none';
				    iframe.style.height = 0;
				    iframe.src = url;
				    document.body.appendChild(iframe);
				    setTimeout(() => {
				    	iframe.remove()
				    }, 5 * 1000)
            	}
        	}
		}
	}
</script>

<script>
window.onload = select();

$("#select").click(function(){
   	select();
});

function select() {
    var trans = $("#trans").val();
    var project = $("#project").val();
    var url = `/atp4p/result/list/?project=${project}&trans=${trans}&page=1`;
    $.ajax({
		type: 'GET',
		url: url,
		dataType:'json',
		success: function(res){
			var data = res.data;
	    	var len = data.length;
	    	var out = "";
			if(len > 0){
		        for(var i = 0; i < len; i++){
		        	out += 
		        		`<tr>
		        		<td><input type="checkbox" aria-hidden="false" value=${data[i].id} onclick="check()" name="checkOne"></td>
                    	<td>${data[i].id}</td>
                    	<td>${data[i].project}</td>
                    	<td>${data[i].tran_name}</td>
                    	<td>${data[i].file_name}</td>
                    	<td>${data[i].create_time}</td>
                    	<td>
                            <a href="/atp4p/result/download/?id=${data[i].id}">Download</a>
                            <a href="#" style="color: red" onClick="del(${data[i].id})">Delete</a>
                        </td>
                   		</tr>`;
				}
            }
            $('#content').html(out);
            goPage(1,10);
		}
	});
};
</script>

{% endblock %}